<template>
  <div class="download">
    <a href="javascript:;" class="btn"></a>
    <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
    <span class="shadow"></span>
    <span class="shadowr"></span>
  </div>
</template>

<script>
export default {
  name: "DownloadIcon",
};
</script>

<style lang="less">
.download {
  position: absolute;
  top: 0;
  z-index: 20;
  right: -1px;
  width: 254px;
  height: 285px;
  background: url("../../../common/images/download.png") no-repeat 0 0;
  .btn {
    display: block;
    width: 215px;
    height: 56px;
    margin: 186px 0 0 19px;
    // background-position: 0 9999px;
    text-indent: -9999px;
    background: url("../../../common/images/download.png") no-repeat 0 -9999px;
    &:hover {
      background-position: 0 -291px;
    }
  }
  p {
    margin: 10px auto;
    text-align: center;
    color: #8d8d8d;
  }
  .shadow,
  .shadowr {
    display: block;
    position: absolute;
    top: 0;
    left: -20px;
    width: 20px;
    height: 285px;
    background-position: -1px 0;
    background: url("../../../common/images/banner.png") no-repeat -1px 0;
  }
  .shadowr {
    left: auto;
    right: -20px;
    background-position: -20px 0;
  }
}
</style>
